<template>
	<view>
		<view class="tui-addr-box">
			<form :report-submit="true" style="font-family:PingFang SC;">
				<view class="tui-line-cell">
					<view class="tui-title">收货人</view>
					<input placeholder-class="tui-phcolor" v-model="addseedata.name" class="tui-input"
						name="name" placeholder="请填写收货人" maxlength="15" type="text" />
				</view>
				<view class="tui-line-cell">
					<view class="tui-title">手机号码</view>
					<input placeholder-class="tui-phcolor" v-model="addseedata.phone" class="tui-input"
						name="mobile" placeholder="请填写手机号码" maxlength="11" type="text" />
				</view>
				<view class="tui-line-cell" @click="showMulLinkageThreePicker">
					<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
					<input placeholder-class="tui-phcolor" v-model="addseedata.area" class="tui-input" disabled name="city"
						placeholder="请选择所在地区" maxlength="50" type="text" />
					<image src="https://yangrongshan.oss-cn-hangzhou.aliyuncs.com/200.png" mode=""
						style="width:14rpx;height:25rpx;"></image>
				</view>
				<view class="tui-line-cell" style="align-items: end;">
					<view class="tui-title">收货地址</view>
					<textarea placeholder-class="tui-phcolor" v-model="addseedata.detail" style="height: 180rpx;"
						class="tui-input" name="address" placeholder="请填写详细地址：如道路、门牌号、小区、楼栋号、单元室等" type="text" />
				</view>
				<!-- 默认地址 -->
				<view class="tui-swipe-cell">
					<view class="tui-swipe-cell-left">
						<text class="tui-swipe-cell-left-set">设为默认地址</text>
						<text class="tui-swipe-cell-left-noset">以后不再设置默认地址</text>
					</view>
					<switch :checked="addseedata.defaultFlag==1?true:false" @change="onChange" color="#077840"
						class="tui-switch-small" />
				</view>
				<!-- 保存地址 -->
				<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
					:pickerValueDefault="cityPickerValueDefault" :province="province" :city="city" :area="area" @onCancel="onCancel"
					@onConfirm="Confirm"></mpvue-city-picker>
			</form>
		</view>
		<view class="tui-addr-save">
			<view @tap="address" class="tui-delbtn">保存</view>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'

	export default {
		components: {

			mpvueCityPicker
		},
		data() {
			return {
				listsindex: 0,
				// lists: ["公司", "家", "学校", "其他"],
				themeColor: '#888',
				addseedata: {
					name: '',
					phone: '',
					detail: '',
					defaultFlag: '1',
					provinceId: '', //省id
					cityId: '', // 城市Id
					regionId:'',//区域Id
					selfFlag:'0',
					area:'',
				},
				type: 0,
				province: [],
				city: [],
				area: [],
				cityPickerValueDefault: [],
			}
		},

		onLoad(option) {
			this.getRegionData();
			console.log(option);
			if (option) {
				this.type = option.type
			}
			// this.addAddress()
		},
		onHide() {
			uni.$off('upAddress')
		},
		methods: {
			// 获取省市区
			getRegionData() {
				let self = this;
				self._post('settings/getRegion', {}, function(res) {
					self.province = res.data[0];
					self.city = res.data[1];
					self.area = res.data[2];
					self.cityPickerValueDefault = [0, 0, 0]
				});
			},
			//  获取我的地址
			// addAddress(){
			// 	this.api.addAddress()
			// 	.then(res=>{
			// 		console.log(res);
			// 	})
			// 	.catch(err=>{
			// 		this.showToast(err)
			// 	})
			// },
			//switch开关
			onChange(e) {
				if (!e.target.value) {
					// this.isDefaults
					this.addseedata.isDefaults = 0
				} else {
					this.addseedata.isDefaults = 1
				}
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onCancel: function() {
				this.$refs.mpvueCityPicker.hide()
			},
			Confirm(e) {
				console.log(e, 'ssssssss')
				this.addseedata.area = e.label;
				this.addseedata.provinceId = e.cityCode[0];
				this.addseedata.cityId = e.cityCode[1];
				this.addseedata.regionId = e.cityCode[2];
			},
			address() {
				console.log(12344);
				if (!this.addseedata.name) {
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'error'
					})
				} else if (!this.addseedata.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'error'
					})
				} else if (!(/^[1][0,1,2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.addseedata.phone))) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'error'
					})
				} else if (!this.addseedata.area) {
					uni.showToast({
						title: '请选择所在城市',
						icon: 'error'
					})
				} else if (!this.addseedata.detail) {
					uni.showToast({
						title: '请输入详细的收货地址',
						icon: 'error'
					})
				} else {
					
					let self = this;
					uni.showLoading({
						title: '加载中'
					});
					self._postBody('user/address/add', self.addseedata, function(res) {
						uni.showToast({
							title: '新增成功',
							duration: 2000,
							icon: 'success'
						});
						uni.hideLoading();
						uni.$emit('upAddress')
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1500)
						
					});
					
				}
			}
		}
	}
</script>

<style scoped>
	.tui-addr-box {
		padding: 0 30rpx;
		background: #FFFFFF;
	}

	.tui-line-cell {
		width: 100%;
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.tui-title {
		width: 180rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;

	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #135AFF;
		color: #fff;
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid #135AFF;
		border-radius: 6rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-swipe-cell {
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 20rpx 0;
		border-radius: 6rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.tui-swipe-cell-left-set {

		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;

	}

	.tui-swipe-cell-left-noset {

		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;

	}


	.tui-addr-save {
		margin-top: 30rpx;
		padding: 24rpx;
	}

	.tui-del {
		padding: 24rpx;
	}

	.tui-delbtn {
		width: 630rpx;
		height: 96rpx;
		background: #077840;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 96rpx;
		margin: 30rpx auto 0;
		text-align: center;
	}
</style>